<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <title>Document</title>

    <style>
    .card-layout {
        display: flex;
        flex-direction: row;

        /* Put a card in the next row when previous cards take all width */
        flex-wrap: wrap;
        margin-top: 5%;
        margin-left: 20%;
    }

    .card-layout__item {
        /* There will be 3 cards per row */
        flex-basis: 20%;

        padding-left: 0.3rem;
        padding-right: 0.3rem;
        padding-top: 0.3rem;
    }   

    .full-background {
        /* Center the content */
        display: flex;
        flex-direction: column;

        /* Take full size */
        height: 100vh;
        width: 100%;

        /* Background */
        background: url('images/bj.png') center center / cover no-repeat;
    }

    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    }

    li {
        float: left;
    }

    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    li a:hover {
        background-color: #111;
    }

    </style>
</head>

<body>
    <div class="full-background">
        <ul>
            <li><a href="#home">主页</a></li>
            <li><a href="#news">河图</a></li>
            <li><a href="#contact">联系</a></li>
            <li><a href="#about">关于</a></li>
        </ul>   
        <div class="card-layout" id="app">
            <!-- A card with given width -->
            <div class="card-layout__item" v-for="novel in novels">
                <img v-bind:src='novel.image' alt="" height="200" width="150">
                <p>{{novel.name}}<br>
                    作者 : {{novel.author}}<br>
                </p>
            </div>
            <!-- Repeat other cards -->
            ...
        </div>
    </div>
    <script type = "text/javascript">
        var app1 = new Vue({
          el: '#app',
          data () {
            return {
                novels: null
            }
          },
          mounted () {
              axios.get('http://127.0.0.1:8080/api/novel/list')
                .then(response => (this.novels = response.data.data))
                .catch(function (error) {
                    console.log(error);
                });
          }
        })
        console.log("*************",app1.$data)
        </script>
</body>

</html>
